<template>
	<view class="affiche">
		<view class="block">
			<view class="top">公告</view>
			 <view class="more" @click="onMore">
				<text>更多</text>
				<u-icon name="arrow-right-double" size="18"></u-icon>
			</view>
		</view>
		<view class="affiche_list">
			<view class="affiche_list_item" v-for="item in list" :key="item.noticeId" @click="afficheInfo(item)">
				<view class="left">
					<img :src="item.cover" alt="">
				</view>
				<view class="right">
					<view class="name">{{item.noticeTitle}}</view>
					<view class="author">
						发布人：{{item.updateBy}}
					</view>
					<view class="state">
						<view class="date">
							<u-icon name="clock"></u-icon>
							<text>{{item.createTime}}</text>
						</view>
						 <view class="look">
							<u-icon name="eye-fill"></u-icon>
							<text>31</text>
						</view> 
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {noticeList} from '../../common/api'
export default {
	data() {
		return {
			list: [], //列表
		}
	},
	mounted() {
		this.getNoticeList()
	},
	methods: {
		async getNoticeList(){
			let res = await noticeList()
			this.list = res
			console.log(res, 111);
		},
		afficheInfo(data) {
			uni.setStorageSync('affiche', data)
			uni.navigateTo({
				url: '/pages/afficheInfo/afficheInfo'
			});
		},
		onMore() {
			console.log(1111);
			uni.navigateTo({
				url: '/pages/afficheMore/afficheMore'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.affiche {
	padding: 32rpx;
	background: #f5f5f5;

	.block {
		display: flex;
		justify-content: space-between;

		.top {
			font-size: $uni-font-size-medium;
			font-weight: bold;
		}

		.more {
			display: flex;

			text {
				font-size: $uni-font-size-small;
			}
		}
	}

	.affiche_list {
		margin-top: 32rpx;

		.affiche_list_item {
			display: flex;
			padding: 20rpx;
			border-radius: 18rpx;
			background: #ffffff;
			margin-bottom: 20rpx;

			.left {
				width: 200rpx;
				height: 180rpx;

				img {
					width: 100%;
					height: 100%;
					border-radius: 18rpx;
				}
			}

			.right {
				width: calc(100% - 200rpx);
				margin-left: 20rpx;
				display: flex;
				flex-flow: column;
				justify-content: space-between;

				.name {
					font-size: $uni-font-size-small;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.author {
					font-size: $uni-font-size-small;
					color: $uni-color-type1;
				}
				.state {
					display: flex;
					justify-content: space-between;
					color: $uni-color-type1;
				}
				.date,
				.look {
					font-size: $uni-font-size-mini;
					display: flex;

					text {
						margin-left: 10rpx;
					}
				}

			}
		}
	}
}
</style>
